<template>
  <div class="attachment1">
    <div class="big_box">
      <div
        class="form"
        v-for="(item, index) in HomeContent.Default.ratingForm.value"
        :key="index"
      >
        <div class="title BdBt">{{ index + 1 }}.{{ item.Project }}(满分14分)</div>
        <div class="box_title BdBt">
          <div class="Box1 BdRt">序号</div>
          <div class="Box2 BdRt">作业内容</div>
          <div class="Box3 BdRt">评分要点（各竞赛环节漏项或累计最多扣相应配分）</div>
          <div class="Box4 BdRt">配分</div>
          <div class="Box5 BdRt">扣分</div>
          <div class="Box6">判罚依据</div>
        </div>
        <div
          class="form_content BdBt"
          v-for="(item1, index1) in item.EvaluateGroupModels"
          :key="index1"
        >
          <div class="Box1 BdRt">
            <span class="parameter">{{ item1.Serial }}</span>
          </div>
          <div class="Box2 BdRt">
            <span class="parameter">{{ item1.Stage }}</span>
          </div>
          <div class="Box3 BdRt list">
            <el-checkbox
              style="margin-left: 20px"
              v-for="(item2, index2) in item1.Items"
              v-model="item2.Result"
              :key="index2"
              disabled
              >{{ item2.Description }}</el-checkbox
            >
          </div>
          <div class="Box4 BdRt">
            <span class="parameter">{{ item1.Share }}</span>
          </div>
          <div class="Box5 BdRt">
            <span class="parameter">{{ item1.Score }}</span>
          </div>
          <div class="Box6">
            <span class="parameter">判罚依据</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import HomeContent from "../HomeContent";
import WebSocketComponent from "@runtime/module/WebSocket/WebSocketComponent";
import { ClientMessage } from "@runtime/generate/message/ClientMessage";
import MessageCode from "../MessageCode";

onMounted(async () => {
  let newArr: any = await WebSocketComponent.Default.PostMessageAsync(
    new ClientMessage.DiagnosisAdapterRequest(
      MessageCode.Default.MsgCodesList.APPRAISE_RATINGFORM_RECORD
    )
  );
  console.log(JSON.parse(newArr.Content).Result);
  HomeContent.Default.ratingForm.value = JSON.parse(newArr.Content).Result;
  console.log("获取评价数据: ", HomeContent.Default.ratingForm.value);
});
</script>

<style scoped>
.attachment1 {
  width: 1420px;
  /* height: 820px; */
  height: 500px;
  padding: 50px 10px 10px 10px;
  position: absolute;
  top: 64%;
  left: 49.35%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  /* overflow-y: auto; */
  color: #000000;
}

/* .attachment1::-webkit-scrollbar {
  width: 6px;
  height: 1px;
}

.attachment1::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #dfe1e8;
}

.attachment1::-webkit-scrollbar-track {
  border-radius: 10px;
} */

.big_box {
  width: 1400px;
  min-height: 800px;
  border-radius: 8px;
  border: 1px solid #e8ecf4;
}

.form {
  min-height: 200px;
  border-bottom: 1px solid;
}

.title {
  width: 100%;
  height: 50px;
  font-size: 20px;
  font-weight: 600;
  line-height: 50px;
}

.box_title {
  display: flex;
  font-size: 20px;
  text-align: center;
  height: 40px;
  line-height: 40px;
}

.form_content {
  width: 100%;
  font-size: 16px;
  /* background-color: pink; */
  display: flex;
  min-height: 64px;
  text-align: center;
}

.parameter {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: black;
}

.list {
  display: grid;
  /* padding-left: 20px; */
  margin-left: 0;
}

.small_box1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 6%;
}

.small_box1_2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 20%;
  margin-left: 6%;
}

.small_box2 {
  float: left;
  margin-left: 26%;
  width: 74%;
}

.small_box3 {
  position: relative;
  width: 100%;
  float: left;
  line-height: 24px;
}

.small_box4 {
  width: 54.2%;
  float: left;
  margin-left: 24.3%;
}

.small_box5 {
  width: 100%;
  float: left;
  line-height: 24px;
  padding: 12px;
}

.BdBt {
  border-bottom: 1px solid #000000;
}

.BdRt {
  border-right: 1px solid #000000;
}

.Box1 {
  width: 8%;
  position: relative;
}

.Box2 {
  width: 13%;
  position: relative;
}

.Box3 {
  width: 53%;
}

.Box4 {
  width: 8%;
  position: relative;
}

.Box5 {
  width: 8%;
  position: relative;
}

.Box6 {
  width: 10%;
  position: relative;
}

/* .ant-checkbox-wrapper+.ant-checkbox-wrapper {
    margin-left: 0;
} */
</style>
